<template>
    <div>
        <search-bar ref="search-bar"
                    @wxcMinibarRightButtonClicked="minibarRightButtonClick">
        </search-bar>
        <div v-if="!isFirst">
            <book-list :listHeight="listHeight" :bookList="bookList"
                       :loading="loading"
                       @onLoading="onloading">
            </book-list>
        </div>
        <div v-else>
            <history :listHeight="listHeight" :searchHistory="searchHistory" @setInputValue="setInputValue"></history>
        </div>
        <wxc-loading :show="isShowLoading" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
    const modal = weex.requireModule('modal');
    import {WxcMinibar, WxcLoading} from 'weex-ui';
    import SearchBar from '../components/search/SearchBar'
    import BookList from '../components/search/BookList'
    import History from '../components/search/History'
    import {SEARCH_HISTORY} from '../store/mutation-types';
    import {SET_SEARCH_HISTORY} from '../store/mutations';
    import {search_book} from '../store/actions';
    import {getCache} from '../util/storageUtils';

    import {Utils} from 'weex-ui'
    import {getRealScreenHeight} from '../util/Config'

    export default {
        components: {WxcMinibar, WxcLoading, SearchBar, BookList, History},
        data() {
            return {
                loading: false,
                value: '系统',
                bookListTemp: [],
                isEmpty: true,
                isFirst: true,
                isShowLoading: false,
                needMask: true,
                limit: 10,
                start: 1,
                search_book: search_book,
                bookListJson: [],
                searchHistory: [],
                isModify: false,
                listHeight:  0,
            }
        },
        mounted() {
            getCache(SEARCH_HISTORY).then(value => {
                    this.searchHistory = JSON.parse(value)|| [];
                }
            );
            this.listHeight = getRealScreenHeight(Utils) - 90;
        },
        computed: {
            bookList() {
                if (this.isModify) {
                    this.isModify = false;
                    let books = [];
                    if (typeof this.bookListJson['books'] === 'object') {
                        books = this.bookListJson['books']
                    }
                    if (books.length > 0) {
                        books.forEach(value => {
                            this.bookListTemp.push(value);
                        });
                    }
                }
                return this.bookListTemp;
            },
            total() {
                return this.bookListJson['total'] || 0;
            },
            isBookEnd() {
                console.log('isBookEnd', this.start > parseInt(this.total / this.limit) + 1);
                return (this.start > parseInt(this.total / this.limit) + 1) || false;
            },

        },
        methods: {
            onloading() {
                this.loading = !this.loading && !this.isBookEnd;
                if (this.loading) {
                    console.log('loading', this.total);
                    if (!this.isBookEnd) {
                        this.getData()
                    }
                }
            },
            getData() {
                let self = this;
                self.start++;
                console.log(self.start);
                self.isShowLoading = true;
                this.search_book({
                    query: self.value,
                    start: self.start,
                    limit: self.limit,
                    callback: (data) => {
                        this.bookListJson = data;
                        this.isModify = true;
                    },
                    after: () => {
                        self.loading = false;
                        self.isShowLoading = false;
                    }
                });
            },
            minibarRightButtonClick(obj) {
                let self = this;
                self.value = obj.value;
                self.isShowLoading = true;
                self.needMask = true;
                this.start = 1;
                self.isFirst = false;
                SET_SEARCH_HISTORY(this.searchHistory, self.value);
                console.log({ query: self.value,
                    start: self.start,});
                this.search_book({
                    query: self.value,
                    start: self.start,
                    limit: self.limit,
                    callback: (data) => {
                        this.bookListTemp = [];
                        self.bookListJson = data;
                        this.isModify = true;
                    },
                    after: () => {
                        self.isShowLoading = false;
                        self.needMask = false;
                    }
                });
            },
            setInputValue(obj) {
                this.$refs['search-bar'].autoBlur();
                this.$refs['search-bar'].setValue(obj.value);
                this.minibarRightButtonClick(obj);
            }
        },
    }
</script>

<style scoped>

</style>